<script>
  export default {
    currentUser: null,
    onLaunch: function () {
      // 隐藏原生tarbar (这里因为用自定义tarbar跳转时闪白屏，所以这里用一种特殊的方式)
      // uni.hideTabBar()
      // console.log('App onLaunch');
    },
    onShow: function () {
      console.log('App Show');
    },
    onHide: function () {
      console.log('App Hide')
    }
  }
</script>

<style lang="scss">
  @import "uview-ui/index.scss";
  @import url('./static/style/chatInterface.css');
  @import url('./static/style/flex.wxss');


  /* 隐藏滚动条 */
  uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
  .uni-page-head .uni-page-head__title{
    font-size: 30rpx !important;
  }

	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}



	.u-relative,
	.u-rela {
		position: relative;
	}

	.u-absolute,
	.u-abso {
		position: absolute;
	}



	.u-font-xs {
		font-size: 22rpx;
	}

	.u-font-sm {
		font-size: 26rpx;
	}

	.u-font-md {
		font-size: 28rpx;
	}

	.u-font-lg {
		font-size: 30rpx;
	}

	.u-font-xl {
		font-size: 34rpx;
	}

	.u-flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.u-flex-wrap {
		flex-wrap: wrap;
	}

	.u-flex-nowrap {
		flex-wrap: nowrap;
	}

	.u-col-center {
		align-items: center;
	}

	.u-col-top {
		align-items: flex-start;
	}

	.u-col-bottom {
		align-items: flex-end;
	}

	.u-row-center {
		justify-content: center;
	}

	.u-row-left {
		justify-content: flex-start;
	}

	.u-row-right {
		justify-content: flex-end;
	}

	.u-row-between {
		justify-content: space-between;
	}

	.u-row-around {
		justify-content: space-around;
	}

	.u-text-left {
		text-align: left;
	}

	.u-text-center {
		text-align: center;
	}

	.u-text-right {
		text-align: right;
	}

	.u-flex-col {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	/**
	* 弹性盒三段式布局
	*/
	.page_box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
		background: $u-bg-color;
	}
	.scroll-box {
		flex: 1;
		height: 100%;
		position: relative;
	}
	.content_box {
		flex: 1;
		overflow-y: auto;
	}

	/**
	* 溢出省略号
	* @param {Number} 行数
	*/
	@mixin ellipsis($rowCount: 1) {
		@if $rowCount <=1 {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		} @else {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: $rowCount;
			-webkit-box-orient: vertical;
		}
	}
	@for $i from 1 through 12 {
		.u-ellipsis-#{$i} {
			@include ellipsis($i);
		}
	}

	// 定义flex等分
	@for $i from 0 through 12 {
		.u-flex-#{$i} {
			flex: $i;
		}
	}

	// 定义字体(px)单位，小于20都为px单位字体
	@for $i from 9 to 20 {
		.u-font-#{$i} {
			font-size: $i + px;
		}
	}

	// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
	@for $i from 20 through 50 {
		.u-font-#{$i} {
			font-size: $i + rpx;
		}
	}

	// 定义内外边距，历遍1-100
	@for $i from 0 through 100 {
		// 只要双数和能被5除尽的数
		@if $i % 2 == 0 or $i % 5 == 0 {
			// 得出：u-margin-30或者u-m-30
			.u-margin-#{$i},
			.u-m-#{$i} {
				margin: $i + rpx !important;
			}
			.u-m-x-#{$i} {
				margin-left: $i + rpx !important;
				margin-right: $i + rpx !important;
			}
			.u-m-y-#{$i} {
				margin-top: $i + rpx !important;
				margin-bottom: $i + rpx !important;
			}

			// 得出：u-padding-30或者u-p-30
			.u-padding-#{$i},
			.u-p-#{$i} {
				padding: $i + rpx !important;
			}
			.u-p-x-#{$i} {
				padding-left: $i + rpx !important;
				padding-right: $i + rpx !important;
			}
			.u-p-y-#{$i} {
				padding-top: $i + rpx !important;
				padding-bottom: $i + rpx !important;
			}

			@each $short, $long in l left, t top, r right, b bottom {
				// 缩写版，结果如： u-m-l-30
				// 定义外边距
				.u-m-#{$short}-#{$i} {
					margin-#{$long}: $i + rpx !important;
				}

				// 定义内边距
				.u-p-#{$short}-#{$i} {
					padding-#{$long}: $i + rpx !important;
				}

				// 完整版，结果如：u-margin-left-30
				// 定义外边距
				.u-margin-#{$long}-#{$i} {
					margin-#{$long}: $i + rpx !important;
				}

				// 定义内边距
				.u-padding-#{$long}-#{$i} {
					padding-#{$long}: $i + rpx !important;
				}
			}
		}
	}

 /* 公共样式 */
 .container{
 	padding: 20rpx;
 	box-sizing: border-box;
 }
 .section{
 	margin-bottom: 20rpx;
 	.section-title{
 		font-size: 32rpx;
 		text-align: left;
 		border-left: 6rpx solid #EABA5B;
 		padding-left: 20rpx;
 		font-weight: bold;
 	}
 	.section-item{
 		background-color: #fff;
 		border-radius: 12rpx;
 		padding: 0 20rpx;
 		box-sizing: border-box;
 		font-size: 32rpx;
 		color: #333333;
 	}
 	.value{
 		color: #666666;
 	}
 	.item{
 		padding: 20rpx 0;
 		//&:not(:last-child){
 			//border-bottom: 2rpx solid #F5F5F5;
 		//}
 		.key{
 			flex-shrink: 0;
 		}
 		.value{
 			flex: 1;
 			text-align: right;
 			padding-left: 20rpx;

 		}

 	}
 	textarea{
 		// background-color: #F5F5F5;
 		// padding: 10rpx;
 		// box-sizing: border-box;
 	}
 	.avatar{
 		width: 100rpx;
 		height: 100rpx;
 		background-color: none;
 		border-radius: 100%;
 		margin-right: 0;
 		&:before,&:after{
 			border:none
 		}
 		image{
 			width: 100%;
 			height: 100%;
 			border-radius: 100%;

 		}
 	}
 }

 .w100{
	 width:100%;
 }
 .fixed{
	 position: fixed;
	 left: 0;
	 bottom: 0;
 }
 .btn-box{
 	text-align:center;
 	padding:20rpx 30rpx 40rpx 30rpx;
	margin-bottom: 30rpx;
	line-height: 90rpx;
	padding-bottom: 20rpx+constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
	padding-bottom: 20rpx+env(safe-area-inset-bottom); ///兼容 IOS>11.2/
	box-sizing: border-box;
 	.btn{
 		border: none;
 		border-radius:156rpx;
 		font-size:28rpx;
		border-radius: 50rpx;

 		&.btn-plain{
 			border: 2rpx solid #6C64D0;
 			color: #6C64D0;

 		}
		&.btn-save{
			background: -webkit-linear-gradIEnt(left,#6C64D0,#8481C8);
			color: #fff;

		}
 		&:after{
 			border:none
 		}
 	}
 }



</style>
